<template>
  <div class="zc">
    <nav-header :user="user_name"></nav-header>
    <div class="zcNav">
      <div class="left">
        <left-menu></left-menu>
      </div>
      <div class="rightNav">
        <div class="first">
          <div class="llint">
            <div class="liupload">
              <el-button
                @click="dialogVisible=true"
                size="mini"
                type="primary"
                class="llupload"
              >用例导入</el-button>
              <el-dialog
                title="测试用例上传"
                :visible.sync="dialogVisible"
                :width="wid"
                :before-close="handleClosell"
              >
                <template v-if="dis">
                  <el-upload
                    ref="upload"
                    class="upload-position"
                    drag
                    :action="address"
                    :on-success="loadSux"
                    :on-error="loadFail"
                    :auto-upload="auto"
                    :height="hei"
                  >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                      将文件拖到此处，或
                      <em>点击上传</em>
                    </div>

                    <div class="el-upload__tip" slot="tip">
                      <div class="tip_left">只能上传xlsx文件,</div>
                      <div class="tip_right" @click="loadModule()">下载模板</div>
                    </div>
                  </el-upload>
                </template>

                <template v-else id="vload">
                  <el-table :data="tableData3" height="250" :border="true" style="width: 100% height:500px">
                    <el-table-column align="center" prop="name" label="项目名称" width="120"></el-table-column>
                    <el-table-column prop="version" label="版本号" width="200"></el-table-column>
                    <el-table-column prop="case_id" label="用例id" width="150"></el-table-column>
                    <el-table-column prop="reason" label="错误原因" width="300"></el-table-column>
                  </el-table>
                </template>
                <span slot="footer" class="dialog-footer">
                  <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->

                  <el-button type="primary" @click="clilNext" v-if="button_swith">下一步</el-button>
                  <el-button type="primary" @click="close" v-else>完成</el-button>
                </span>
              </el-dialog>
            </div>
          </div>
        </div>
        <div class="second">
          <el-table :data="tableData" :border="true" style="width: 100%">
            <el-table-column align="center" fixed prop="project_name" label="项目名称" min-width="200"></el-table-column>
            <el-table-column align="center" prop="update_time" label="最近更新日期" min-width="200"></el-table-column>
            <el-table-column align="center" header-align="center" prop="project_person" label="用例维护人员姓名" min-width="200">
              <template  slot-scope="scope" class="tttt">
                <div v-if="scope.row.display" style="text-align:center" class="vifname">
                  <div class="inputName">
                    <el-input
                      @blur="edit_save(scope.row)"
                      v-model="input_name"
                      size="mini"
                      placeholder="姓名"
                    ></el-input>
                  </div>
                </div>
                <div v-else class="editName" style="text-align:center">
                  <div class="nameer" v-if="scope.row.project_person">{{scope.row.project_person}}</div>
                  <div class="nameer" v-else>未填写</div>

                  <div @click="edit_name(scope.row)" class="edi">
                    <i class="el-icon-edit"></i>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column align="center" prop="case_number" label="用例总数量" min-width="200"></el-table-column>

            <el-table-column align="center" fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <!-- <el-button type="text" size="small">编辑</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pages">
          <div class="inPages">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="1"
              :page-sizes="[10]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              background
              prev-text="上一页"
              next-text="下一页"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import NavHeader from "@/components/NavHeader";
import leftMenu from "@/components/leftMenu";
import { api } from "./api/index";
import { exportExcel } from "@/api/download";
// import address from "./../main"

import { address } from "./../main"

//刘亮ffd

   
// 测试111111
export default {
  data() {
    return {
      address:address+"/case/upload-casefile", // 下载路径
      user_name: "",
      button_swith: true, // 控制下一步和关闭按钮
      hei: "50%",
      wid: "30%",
      status: "",
      auto: false,
      dis: true,
      // dialogVisible: true,
      input_name: "",
      arg: {},
      dialogVisible: false,
      total: 0,
      project_name: "展翅系统",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: [],
      tableData3: [],
    };
  },
  components: {
    NavHeader,
    leftMenu,
  },
  methods: {
    loadModule() {
      const url = "/case/export-temp";
      const options = {
        project_name: "测试用例模板",
        project_type: 0,
      };
      exportExcel(url, options); // 下载文件方法
    },

    close() {
      this.dialogVisible = false;
      this.dis = true
    },
    // 成功的回调
    loadSux(response, file, fileList) {
      if (response.status == 10000) {
        this.status = response.status;
        // this.$message("response.msg");
        this.dis = true;
        this.dialogVisible = false;
      } else {
        this.dis = false;
        this.wid = "40%";
        this.button_swith = false;
        response.msg.forEach((da) => {
          let dic = {};
          dic.version = da.version_number;
          dic.name = da.project_name;
          dic.case_id = da.case_id;
          dic.reason = da.cause;
          this.tableData3.push(dic);
        });
      }
    },

    // 失败的回调
    loadFail(response, file, fileList) {
      console.log(fail);
    },

    clilNext() {
      this.$refs.upload.submit();
      if (this.status == 10000) {
        console.log("111");
        this.dis = false;
      }

      // this.auto = true;
    },
    edit_save(row) {
      let dic = {
        project_person: this.input_name,
        project_type: row.project_type,
        project_name: row.project_name,
      };

      api({
        url: "/case/proAdd",
        method: "POST",
        data: dic,
      }).then((da) => {
        if (da.data.status === 10001) {
          this.func_mouted();
          this.$message({
            type: "success",
            message: "更改成功",
          });
        } else {
          this.$message({
            type: "fail",
            message: "更改失败",
          });
        }
      });
      row.display = !row.display;
    },
    submit(ed) {
      ed.display = false;
    },
    edit_name(ed) {
      // ed.project_person = "";
      this.input_name = "";
      ed.display = true;

      console.log("111");

      // console.log(ed.project_person);

      console.log(this.input_name);
    },
    handleClosell(done) {
      done();
    },
    // 点击查看调用
    handleClick(row) {
      let data1 = {
        project_name: row.project_name,
        project_type: 0,
        // page: 1,
      };

      localStorage.setItem("res", JSON.stringify(data1));

      api({
        url: "/case/case_list",
        method: "GET",
        params: data1,
      }).then((da) => {
        // 传参到list
        let result = da.data;
        this.$router.push({
          name: "projectList",
          params: {
            da: JSON.stringify(result),
          },
        });
      });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(page_number) {
      this.arg.page = page_number;

      api({
        url: "/case/case_list",
        method: "GET",
        params: this.arg,
      })
        .then((da) => {
          let result = da.data;

          da.data.data.forEach((d) => {
            d.display = false;
          });

          this.tableData = da.data.data;

          this.total = result.totalCount;
        })
        .catch((err) => {
          console.log(err);
        });

      // console.log(`当前页: ${val}`);
    },

    func_mouted() {
      let data1 = {
        project_type: 0,
      };
      this.arg = data1;
      api({
        url: "/case/case_list",
        method: "GET",
        params: data1,
      })
        .then((da) => {
          let result = da.data;
          console.log(da);

          da.data.data.forEach((d) => {
            // 循环遍历并赋值
            d.display = false;
          });
          this.tableData = da.data.data;
          this.total = result.totalCount;

          console.log(this.tableData);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {

    console.log(this.address);
    console.log("address");
    this.func_mouted();
    this.user_name = localStorage.getItem("user");
  },
};
</script>



<style lang='scss' scoped>
.zc {
  width: auto;
}
.upload-position {
  position: relative;
  .el-upload__tip {
    position: absolute;
    top: -50px;
    left: 0px;
    letter-spacing: 1px;
    display: flex;
    justify-content: flex-start;
    .tip_right {
      margin-left: 10px;
      color: red;
      // cursor: pointer;
    }
    .tip_right:hover {
      cursor: pointer;
    }
  }
}

.vifname {
  display: flex;
  justify-content: flex-start;
  .save {
    margin-left: 20px;
  }
}
.el-input.el-input--mini {
  width: 68px !important;
  text-align: center;
}
.editName {
  display: flex;
  justify-content: center;
  .nameer {
    width: auto;
  }
  .edi {
    margin-left: 20px;
  }
}
// .tttt {
//   display: flex;
//   justify-content: flex-start;
//   text-align: center;
// }

.upload-position {
  text-align: center;
}

.zc {
  height: 100%;
}

.zcNav {
  height: calc(100% - 60px);
  display: flex;
  justify-content: flex-start;
  .rightNav {
    background: #fff;
    width: calc(100% - 260px);
    // width: auto;
    .first {
      height: 50px;
      background: #eee;
      line-height: 50px;
      font-weight: bold;
      line-height: 50px;
      font-size: 20px;
      padding-left: 30px;
      letter-spacing: 10px;
      display: flex;
      justify-content: flex-start;
    }
    .second {
      width: auto;
      // width: calc(100% - 260px);
    }
    .pages {
      width: 100%;
      height: 70px;
      line-height: 70px;
      text-align: right;
      .inPages {
        margin-top: 40px;
        height: 30px;
        margin-right: 5px;
      }
    }
  }
}
</style>    



